<template>
    <el-card shadow="always" class="card" :style="{ background: `var(${data.style})` }">
        <div class="after" :style="{ background: `var(${data.style1})` }"></div>
        <div class="before" :style="{ background: `var(${data.style1})` }"></div>
        <div class="icon"></div>
        <div class="cardInfo">
            
        </div>
    </el-card>
</template>

<script setup lang="ts">
const props = defineProps(['data'])
const data = props.data;


</script>

<style scoped lang="less">
.card {
    flex: 1;
    margin-right: 21px;
    height: 150px;
    box-sizing: border-box;
    position: relative;
    border-radius: 5px;

    .after,
    .before {
        content: '';
        position: absolute;
        width: 220px;
        height: 220px;
        background: inherit;
        opacity: .5;
        border-radius: 50%;
    }

    .after {
        top: -90%;
        left: -25%;
    }

    .before {
        bottom: -80%;
        right: -10%;
    }
}
</style>